<template>
    <div class="info-list">
        <div class="info-item" v-for="(item, i) in list" :key="item.id">
            <div class="i-title c-title-4 d-flex justify-space-between">
                <div class="i-long">{{ item.title }}</div>

                <div class="i-times">30秒前</div>
            </div>
            <div class="i-msg">人文之美让亚运更精彩 文化是一座城市的独特印记,体现了城市的韵味和精气神。亚运会是体育盛会,也是文化盛宴</div>
            <div class="i-state d-flex">
                <div class="i-state-item d-flex align-center">
                    <!-- <div class="i-ico"></div> -->
                    <span class="iconfont icon-jiantou_xiangxia well"></span>
                    <span>利好</span>
                    <span>125</span>
                </div>
                <div class="i-state-item d-flex align-center">
                    <!-- <div class="i-ico"></div> -->
                    <span class="iconfont icon-jiantou_xiangxia"></span>
                    <span>利空</span>
                    <span>345</span>
                </div>
            </div>
            <!-- <div class="i-action d-flex align-center">
                <div class="ej-box ej-mr" v-for="emj in item.children.slice(0, 3)">
                    <img class="ej-ico" :src="EmojiList[emj.id]" /><span class="ej-num">{{ emj.num }}</span>
                </div>
                <img class="ej-ico ej-mr" src="@/assets/add.png" @click="onPopEmoji($event, i)" />
                <img class="ej-ico ej-mr" src="@/assets/share1.png" />
            </div> -->
            <!-- <img class="ej-ico ej-mr" src="@/assets/add.png" @click="onPopEmoji($event, i)" /> -->
            <div class="i-action d-flex align-center">
                <!-- <div class="ej-box ej-mr" :class="{ choose: chooseEmoji.includes('zan') }">
                    <div class="ej-ico zan" @click="onEmojiClick('zan')"></div><span class="ej-num">122</span>
                </div>
                <div class="ej-box ej-mr" :class="{ choose: chooseEmoji.includes('shit') }">
                    <div class="ej-ico shit" @click="onEmojiClick('shit')"></div><span class="ej-num">122</span>
                </div> -->
                <div class="ej-box ej-mr" :class="{ choose: i.type == item.choose }" v-for="i in item.children" :key="i.id">
                    <div class="ej-ico" :class="i.type" @click="onEmojiClick(item, i.type)"></div>
                    <span class="ej-num">{{ i.num }}</span>
                </div>
                <div class="ej-ico fen ej-mr"></div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { Bus, UI_EMOJI } from "@/connetion/Bus";
import { useEmoji } from "@/stores/emoji";
import { reactive, ref } from "vue";
import { onMounted } from "vue";
import { EmojiList } from "../emoji/emoji";

const curId = ref(0);
const emoji = useEmoji();
const list = reactive([
    {
        id: 14545,
        title: "人文之美让亚运更精彩",
        choose: "",
        children: [
            {
                id: 0,
                num: 24,
                type: "zan"
            },
            {
                id: 2,
                num: 45,
                type: "shit"
            }
        ]
    },
    {
        id: 456452,
        title: "腾讯宣布推出QQ浏览器微信版",
        choose: "",
        children: [
            {
                id: 3,
                num: 32,
                type: "zan"
            },
            {
                id: 4,
                num: 876,
                type: "shit"
            }
        ]
    }
]);

// const chooseEmoji = ref<string[]>([])

const onEmojiClick = (item: any, str: string) => {
    item.choose = str;
    item.children.forEach((i: any) => {
        if (i.type == str) {
            i.num++;
        }
    });
    // const id = chooseEmoji.value.indexOf(str);
    // if (id != -1) {
    //     chooseEmoji.value.splice(id, 1);
    // }
    // else {
    //     chooseEmoji.value.push(str);
    // }
};

onMounted(() => {
    Bus.on(UI_EMOJI, onChoose);
});

function onChoose(id: any) {
    console.log("choose", id);
    const children: any = list[curId.value].children;
    const item = children.find((i: any) => i.id == id);
    if (item) {
        item.num += 1;
    } else {
        children.push({
            id,
            num: 1
        });
    }
    children.sort((a: any, b: any) => (a.num > b.num ? -1 : 1));
}

const onPopEmoji = (e: any, i: number) => {
    emoji.setPosition(e.clientX, e.clientY);
    emoji.changePopEmoji(!emoji.popEmoji);
    console.log(i, "cur");
    curId.value = i;
};
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
